﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxFileUpload.aspx.cs" Inherits="Web.jQuery_Plugin_Demo.AjaxFileUpload" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>jQuery Plugin Demo: AjaxFileUpload</title>
  
  <link type="text/css" rel="Stylesheet" href="../css/bootstrap.min.css" />

</head>
<body>
  <div class="container">  
  <form id="formMain" runat="server">
    <img id="loading" src="http://www.phpletter.com/Demo/AjaxFileUpload-Demo/images/loading.gif" style="display:none;" />
    Select a file: 
    <input id="fileDemo" class="input-block-level" type="file" />
    <button id="btnUpload" class="btn">Upload</button>
  </form>
  </div>

  <script type="text/javascript" src="../js/jquery.js"></script>
  <script type="text/javascript" src="../js/bootstrap.min.js"></script>
  <script type="text/javascript" src="../js/jquery.ajaxfileupload.js"></script>

  <script type="text/javascript">
    $(function () {
//      $("#loading")
//      .ajaxStart(function () {
//        $(this).show();
//      })
//      .ajaxComplete(function () {
//        $(this).hide();
//      });

      $("#btnUpload").click(function () {
        $.ajaxFileUpload({
          url: '../Handler/DoAjaxFileUpload.ashx',
          secureuri: false,
          fileElementId: 'fileDemo',
          dataType: 'json',
          beforeSend: function () {
            $("#loading").show();
          },
          complete: function () {
            $("#loading").hide();
          },
          success: function (data, status) {
            if (typeof (data.error) != 'undefined') {
              if (data.error != '') {
                alert(data.error);
              } else {
                alert(data.msg);
              }
            }
          },
          error: function (data, status, e) {
            alert(e);
          }
        });

        return false;
      });
    });
  </script>

</body>
</html>
